import React from 'react';
import HomeLayout from './HomeLayout'
import { Avatar, Button, Card, Col, Divider, Form, Input, Row, type MenuProps } from 'antd';
import { Content } from 'antd/es/layout/layout';
import UserOutlined from '@ant-design/icons/lib/icons/UserOutlined';
import TextArea from 'antd/es/input/TextArea';
import { QuestionCircleOutlined } from '@ant-design/icons';

const UserSettingsPage = () => {
  const [collapsed, setCollapsed] = React.useState(false);
  const [selectedMenu, setSelectedMenu] = React.useState('profile');

  const onMenuClick: MenuProps['onClick'] = (e) => {
    setSelectedMenu(e.key);
  };

  return (
    <HomeLayout>
       <Content className="settings-main-content">
          {selectedMenu === 'profile' && (
            <div className="profile-content">
              <Card title="基本信息" bordered={false}>
                <Row gutter={[16, 24]}>
                  <Col xs={24} sm={12} md={8}>
                    <div className="avatar-upload">
                      <Avatar size={128} icon={<UserOutlined />} />
                      <Button type="link" style={{ marginTop: 16 }}>更改头像</Button>
                    </div>
                  </Col>
                  <Col xs={24} sm={12} md={16}>
                    <Form layout="vertical">
                      <Form.Item label="姓名">
                        <Input placeholder="初学者学生" />
                      </Form.Item>
                      <Form.Item label="个人简介">
                        <TextArea 
                          rows={4} 
                          placeholder="偏好初学者，刚开始接触偏好" 
                        />
                      </Form.Item>
                      <Form.Item>
                        <Button type="primary">保存更改</Button>
                      </Form.Item>
                    </Form>
                  </Col>
                </Row>
              </Card>
            </div>
          )}

          {selectedMenu === 'preferences' && (
            <Card title="学习偏好设置" bordered={false}>
              <Form layout="vertical">
                <Form.Item label="学习难度">
                  <Input placeholder="初学者" />
                </Form.Item>
                <Form.Item label="学习领域">
                  <Input placeholder="人工智能基础" />
                </Form.Item>
                <Form.Item>
                  <Button type="primary">保存偏好</Button>
                </Form.Item>
              </Form>
            </Card>
          )}

          {selectedMenu === 'security' && (
            <Card title="安全设置" bordered={false}>
              <Form layout="vertical">
                <Form.Item label="邮箱">
                  <Input addonBefore="邮箱" value="beginner@test.com" disabled />
                </Form.Item>
                <Form.Item label="手机号码">
                  <Input placeholder="未绑定手机号" />
                </Form.Item>
                <Form.Item label="修改密码">
                  <Input.Password placeholder="新密码" />
                </Form.Item>
                <Form.Item>
                  <Button type="primary">更新安全设置</Button>
                </Form.Item>
              </Form>
            </Card>
          )}

          {selectedMenu === 'help' && (
            <Card title="帮助中心" bordered={false}>
              <p>如有任何问题，请联系我们：</p>
              <p><strong>邮箱：</strong> beginner@test.com</p>
              <p><strong>客服电话：</strong> 400-123-4567</p>
              <Divider />
              <Button type="primary" icon={<QuestionCircleOutlined />}>常见问题</Button>
            </Card>
          )}
        </Content>
    </HomeLayout>
  );
};

export default UserSettingsPage;
